<!-- 工资条 -->
<template>
	<view class="pd dfxxtercxfertt">
		<view class="cdvcxdvrtecxrt pd pt20 pm20 mt20" v-for="(item,idx) in jnxzcf">
			<view class="" v-if="item.companyName">
				<text class="iconfont icon-gongsi"></text>
				<text class="z9 fz26 ml5">{{item.companyName}} </text>
			</view>
			<view class="kkxzczxret fz24 mt10">
				<view class="">
					姓名:<text class="z9 fz24">{{item.realName}}</text>
				</view>
				<view class="">
					月份: <text class="z9 fz24"> {{item.month}}</text>
				</view>
				<view class="">
					岗位/工号:<text class="z9 fz24">{{item.companyNo}}</text>
				</view>
				
				<view class="jzhh">
					入职日期: <text class="z9 fz24"> {{item.companyTime}}</text>
				</view>
				<view class="">
					离职日期:<text class="z9 fz24">{{item.leaveTime}}</text>
				</view>
				<view class="">
					出勤天数:<text class="z9 fz24">{{item.workDay}}</text>
				</view>
				<view class="">
					平时加班: <text class="z9 fz24"> {{item.overTime}}</text>
				</view>
				<view class="">
					周末加班:<text class="z9 fz24">{{item.weekOverTime}}</text>
				</view>
				<view class="">
					工时小计:<text class="z9 fz24">{{item.jobDay}}</text>
				</view>
				<view class="">
					餐补费: <text class="z9 fz24"> {{item.mealBalance}}</text>
				</view>
				<view class="">
					扣餐费:<text class="z9 fz24">{{item.mealUp}}</text>
				</view>
				<view class="">
					住宿水电:<text class="z9 fz24">{{item.hydropower}}</text>
				</view>
				<view class="">
					扣迟到缺卡: <text class="z9 fz24"> {{item.later}}</text>
				</view>
				<view class="">
					转账费:<text class="z9 fz24">{{item.transfer}}</text>
				</view>
				<view class="">
					税费3%:<text class="z9 fz24">{{item.taxation}}</text>
				</view>
				<view class="">
					其它扣款: <text class="z9 fz24"> {{item.otherTake}}</text>
				</view>
				<view class="">
					其它补贴:<text class="z9 fz24">{{item.otherSubsidy}}</text>
				</view>
				<view class="">
					保险:<text class="z9 fz24">{{item.insure}}</text>
				</view>
				<view class="">
					借资: <text class="z9 fz24"> {{item.borrow}}</text>
				</view>
				<view class="">
					总扣款:<text class="z9 fz24">{{item.total}}</text>
				</view>
				<view class="">
					应发工资:<text class="z9 fz24">{{item.balance}}</text>
				</view>
				<view class="">
					实际工资:<text class="z9 fz24">{{item.wages}}</text>
				</view>

			</view>
			<view class=" mt20 fz24">
				备注:<text class="z9 fz24">{{item.remark}}</text>
			</view>
			<view class="btm display-flex mt20 pt20 fz30" >
				<view class=" flex-1 red  cen" @tap="dkmxdffdf(idx,item)">
					删除
				</view>
			</view>
		</view>
	<view class="kcdxvrtxzty pd pm20 bgff pt20">
		<view class="z9 fz24 cen pm10">
			备注：导入工资通过聊天记录的文件上传
		</view>
		<button type="primary" class="fz32" @tap="kkxzc">导入工资条</button>
	</view>

	</view>
</template>
<script lang="ts" setup>
	import { ref } from "vue"
	import { onLoad, onReachBottom } from "@dcloudio/uni-app"
	import { dxrequest, kmxzcf, hf, transferTimeYMD,chooseMessageFile } from "@/util/index.js"
	const jnxzcf = ref([])
	const page = ref(1)
	const init = async () => {
		uni.showLoading({
			title: "加载中..."
		})
		const { data } = await dxrequest("/api/salary/page", {
			limit: 10,
			page:page.value
	
		})
		data.list.map(a => {
			jnxzcf.value.push(a)
		})
		uni.hideLoading()
		uni.stopPullDownRefresh();
	}
	onLoad(() => {
		init()
	})
	onReachBottom(()=>{
		page.value++
		init()
	})
	const dessdf = async (id) => {
		const ret = await dxrequest("/api/salary", [id], "DELETE")
	}
	const dkmxdffdf = (idx, data) => {
		uni.showModal({
			title: "温馨提示！",
			content: "确认删除嘛？删除后无法恢复哦！",
			async success({ confirm }) {
				if (confirm) {
					await dessdf(data.id)
					jnxzcf.value.splice(idx, 1)
				}
			}
		})
	}
	const kkxzc  = async ()=>{
		const data = await chooseMessageFile()
		console.log(data.path)
		await dxrequest("/api/salary/exportInUrl?httpUrl="+data.path,{
			httpUrl:data.path
		},"post")
		page.value=1
		jnxzcf.value = []
		init()
	}
</script>

<style scoped>
	.cdvcxdvrtecxrt {
		border-radius: 8rpx;
		background: #fff;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	}

	.xzczfsderxct {
		width: 200rpx;
	}

	.kxzczxretxctyt {
		border: 2rpx solid #e0e0e0;
		width: 100%;
		border-radius: 8rpx;
		padding: 20rpx;
	}

	.kkxzczxret {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(1, 1fr);
		grid-column-gap: 0rpx;
		grid-row-gap: 20rpx
	}
	.dfxxtercxfertt{
		padding-bottom: 200rpx;
	}
</style>